/****************************************************************************************** Import */
import _ from 'lodash';
import React from 'react';
import {View, TouchableHighlight, TouchableOpacity} from 'react-native';
import CompEventContain from '../../base/event/contain';
import Http from '../../../func/system/basis/http/trans';

/****************************************************************************************** Component */
export default class CLoad extends CompEventContain {

    /**
     * 初始化
     */
    constructor(props) {
        super(props);
        
        // 验证props对象的正确性
        if (!_.isString(this.props.url)) console.error('CLoad组件必须指定url参数，且必须为String类型！');
        if (!_.isObject(this.props.pipe)) console.error('CLoad组件必须指定pipe参数，且必须为Object类型！');
        if (!_.isObject(this.props.scene)) console.error('CLoad组件必须指定scene参数，且必须为Object类型！');
        if (!_.isFunction(this.props.onComplete)) console.error('CLoad组件必须指定onComplete参数，且必须为Function类型！');
        if (!_.isFunction(this.props.scene.loading) && !_.isFunction(this.props.loading)) {
            console.error('CLoad组件没有传递loading场景函数：您可以传递loading参数，或者在scene参数中带有loading！');
        }

        // 赋值必填属性（可以使用根下的场景函数，覆盖scene参数下的场景函数。且this.scene.success = this.props.children）
        this.url = this.props.url;
        this.pipe = this.props.pipe;
        this.onComplete = this.props.onComplete;
        this.scene = this.props.scene;
        this.scene.success = this.props.children;
        if (_.isFunction(this.props.loading)) this.scene.loading = this.props.loading;
        if (_.isFunction(this.props.empty)) this.scene.empty = this.props.empty;
        if (_.isFunction(this.props.error)) this.scene.error = this.props.error;
        if (_.isFunction(this.props.offline)) this.scene.offline = this.props.offline;

        // 赋值选填属性
        this.data = _.isObject(this.props.data) ? this.props.data : null;
        this.empty = _.isFunction(this.props.empty) ? this.props.empty : null;

        // state
        this.state = {
            scene: this.scene.loading,
            data: null
        }
    }

    /**
     * 固定样式
     */
    getFixedStyles() {
        return {
			flex: 1,
            flexDirection: 'row',
			justifyContent: 'flex-start',
			alignItems: 'center'
        }
    }

    /**
     * 访问网络，获取组件
     */
    componentDidMount() {

        // 访问http
        Http.get({

            // 定义comp为this
            comp: this,

            // 设置url和data
            url: this.url,
            data: this.data,

            // 成功方法
            success: (data, obj)=> {

               // 带有empty函数时，测试数据是否为空，如果为空，则使用empty场景，并调用父组件onComplete方法（注意状态传递）
               if (_.isFunction(this.empty) && this.empty(data)) {
                    this.setState({ scene: this.scene.empty });
                    this.onComplete('empty', data);
                    console.log('Compload：空数据（empty）');
                    return;
                }

                // 否则，直接指定为success场景，并调用父组件onComplete方法（注意状态传递）
                this.setState({ scene: this.scene.success });
                this.onComplete('success', data);
                console.log('Compload：成功（success）');
            },
            
            // 设置pipe
            pipe: this.pipe
        });
    }

    /**
     * 重写渲染方法
     */
    render() {
        
        // loading, empty, error, offline时的输出
        if (this.state.scene != this.props.children) {
            const Scene = this.state.scene.bind(this);
            if (this.hasEvent()) {
                if (this.getTouchControlType() == 'color') {
                    this.setSysPropsColor();
                    return (
                        <TouchableHighlight {...this.sysProps} style={this.styles}>
                            <Scene></Scene>
                        </TouchableHighlight>
                    );
                } else {
                    this.setSysPropsOpacity();
                    return (
                        <TouchableOpacity {...this.sysProps} activeOpacity={0.7} style={this.styles}>
                            <Scene></Scene>
                        </TouchableOpacity>
                    );
                }
            }
            else {
                return (
                    <View {...this.sysProps} style={this.styles}>
                        <Scene></Scene>
                    </View>
                );
            }
        } 
        
        // success时的输出
        else {
            if (this.hasEvent()) {
                if (this.getTouchControlType() == 'color') {
                    this.setSysPropsColor();
                    return (
                        <TouchableHighlight {...this.sysProps} style={this.styles}>
                            {this.props.children}
                        </TouchableHighlight>
                    );
                } else {
                    this.setSysPropsOpacity();
                    return (
                        <TouchableOpacity {...this.sysProps} activeOpacity={0.7} style={this.styles}>
                            {this.props.children}
                        </TouchableOpacity>
                    );
                }
            }
            else {
                return (
                    <View {...this.sysProps} style={this.styles}>
                        {this.props.children}
                    </View>
                );
            }
        }
	}
}
